<template>
  <div style="background-color: #041c30">
    <!-- <canvas id="canvas" width="800" height="600" ></canvas> -->
    <div class="mainDiv canshushezhicssz" style="
        justify-content: space-between;
        flex-direction: row;
        height: calc(100vh - 200px);
      ">
      <div class="chouti">
        <div class="choutibox">
          <div class="choutileft_header">
            <div class="shousuo">收缩</div>
            <div><img class="shousuo" src="../assets/箭头右.png" alt="" /></div>
          </div>
          <div class="choutileft_main">
            <div class="main_left cssz">
              <div class="r" style="position: relative; z-index: 9999; width: 100%; background-color: #041c30;">
                <div class="stage_c_r main_3 zssz_c" style="width: 50%">
                  <div class="t">
                    <div class="react">
                      <i class="l_up"></i>
                      <i class="l_down"></i>
                      <i class="r_up"></i>
                      <i class="r_down"></i>
                      <div class="title">
                        <span>通用参数设置</span>
                      </div>
                    </div>
                  </div>
                  <div class="d d2">
                    <div id="editDiv">
                      <h1 id="editH1"></h1>
                      <div class="">
                        <input type="number" name="" value="" />
                        <input type="number" name="" value="" />
                        <span>确认</span>
                      </div>
                    </div>
                    <!-- <div class="envent_u">
                      <span>参数名称</span>
                      <span>超低温</span>
                      <span>超高温</span>
                      <span>	低温</span>
                      <span>高温</span>
                    </div> -->
                    <div class="envent_d" id="zbf_edit_cur">
                      <p>
                        <span>超低温</span>
                        <span>{{ canshuData.tsl }}</span>
                      </p>
                      <p>
                        <span>超高温</span>
                        <span>{{ canshuData.tsh }}</span>
                      </p>
                      <p>
                        <span>低温</span>
                        <span>{{ canshuData.tl }}</span>
                      </p>
                      <p>
                        <span>高温</span>
                        <span>{{ canshuData.th }}</span>
                      </p>
                      <p>
                        <span>A层温度场加成系数</span>
                        <span>{{ canshuData.ta }}</span>
                      </p>
                      <p>
                        <span>B层温度场加成系数</span>
                        <span>{{ canshuData.tb }}</span>
                      </p>
                      <p>
                        <span>C层温度场加成系数</span>
                        <span>{{ canshuData.tc }}</span>
                      </p>
                      <p>
                        <span>D层温度场加成系数</span>
                        <span>{{ canshuData.td }}</span>
                      </p>
                      <p>
                        <span>S层温度场加成系数</span>
                        <span>{{ canshuData.ts }}</span>
                      </p>
                      <p>
                        <span>温度场2*2内中外环系数</span>
                        <span>{{ canshuData.t22 }}</span>
                      </p>
                      <p>
                        <span>温度场4*4内中外环系数</span>
                        <span>{{ canshuData.t44 }}</span>
                      </p>
                      <p>
                        <span>温度场6*6内中外环系数</span>
                        <span>{{ canshuData.t66 }}</span>
                      </p>
                      <p>
                        <span>超短距</span>
                        <span>{{ canshuData.dss }}</span>
                      </p>
                      <p>
                        <span>超长距</span>
                        <span>{{ canshuData.dsl }}</span>
                      </p>
                      <p>
                        <span>短距</span>
                        <span>{{ canshuData.ds }}</span>
                      </p>
                      <p>
                        <span>长距</span>
                        <span>{{ canshuData.dl }}</span>
                      </p>
                      <p>
                        <span>超不稳</span>
                        <span>{{ canshuData.ssu }}</span>
                      </p>
                      <p>
                        <span>不稳</span>
                        <span>{{ canshuData.su }}</span>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="stage_c_r main_3 zssz_c" style="height: 100%; width: 50%">
                  <div class="t">
                    <div class="react">
                      <i class="l_up"></i>
                      <i class="l_down"></i>
                      <i class="r_up"></i>
                      <i class="r_down"></i>
                      <div class="title">
                        <span>点位参数设置</span>
                      </div>
                    </div>
                  </div>
                  <div class="d d2">
                    <div id="editDiv1">
                      <h1 id="editH12"></h1>
                      <div class="">
                        <input type="text" name="" value="" />
                        <span>确认</span>
                      </div>
                    </div>
                    <div class="envent_u1">
                      <span>点位</span>
                      <span>停机红外直流</span>
                      <span>温度分析值</span>
                      <span>着火距离分度值</span>
                      <span>燃烧稳定性分度值</span>
                    </div>
                    <div class="csszenvent_d" id="zbf_edit_cur1" @dblclick="openEditPanel"></div>
                    <div id="edit_pointer_panel">
                      <span class="label">{{ currentEditPointerLabel }}</span>
                      <div>
                        <input ref="inputEl" type="text" v-model="currentEditPointerValue" @keydown.esc="closeEditPanel"
                          @keydown.enter="savePointerData" />
                        <button type="button" @click="closeEditPanel">取 消</button>
                        <button type="button" @click="savePointerData">保 存</button>
                      </div>
                    </div>
                  </div>
                  <div class="kaiset">
                    <!-- <div class="name_xitu">初始化分配率系数</div>
                    <div class="btn-submit">开始</div>
                    <div class="btn-submit btn-colse">结束</div>
                    <div class="btn-submit btn-source">source弹窗</div> -->
                  </div>
                </div>
              </div>
            </div>
            <div class="main_right">
              <div class="flex-box">
                <div class="canshupost">
                  <!-- <div class="canshuwendu">温度分析值</div> -->
                  <div class="canshupost-close">
                    <div class="hearder">
                      <div></div>
                      <div class="close-box">x</div>
                    </div>
                    <div class="settom">
                      <div>
                        <span>算法</span>
                        <select class="select-box">
                          <option value="1"></option>
                          <option value="2"></option>
                        </select>
                      </div>
                      <div class="inp-setbox">
                        <div class="inp-cs">参数1</div>
                        <div class="inpu-value valinput">
                          <input type="text" value="12" style="width: 90px; height: 20px" />
                        </div>
                      </div>
                      <div class="inpVal">
                        <div class="inp-setbox">
                          <div class="inp-cs">参数2</div>
                          <div class="inpu-value csninput">
                            <input type="text" value="12" style="width: 90px; height: 20px" />
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="btn-box">
                      <div class="btn-set">
                        <button type="button">删除</button>
                      </div>
                      <div class="btn-set1">
                        <button type="button">确定</button>
                      </div>
                    </div>
                  </div>
                  <div class="canshupost-cont">
                    <!-- <div class="canshupost-box">
                      <div class="canshupost-center">A1</div>
                      <div class="fotos-post"></div>
                      <div class="canshupost-add">+</div>
                    </div> -->
                    <!-- <div class="canshupost-box">
                      <div class="canshupost-center">A2</div>

                      <div class="fotos-post"></div>

                      <div class="canshupost-add">+</div>
                    </div> -->
                    <!-- <div class="canshupost-box">
                      <div class="canshupost-center">A3</div>
                      <div class="fotos-post"></div>
                      <div class="canshupost-add">+</div>
                    </div> -->
                    <!-- <div class="canshupost-box">
                      <div class="canshupost-center">A4</div>
                      <div class="fotos-post"></div>
                      <div class="canshupost-add">+</div>
                    </div> -->
                  </div>
                </div>
                <div class="canshupost">
                  <!-- <div class="canshuwendu">着火距离分度值</div> -->
                  <div class="canshupost-close">
                    <div class="hearder">
                      <div></div>
                      <div class="close-box">x</div>
                    </div>
                    <div class="settom">
                      <div>
                        <span>算法</span>
                        <select class="select-box">
                          <option value="1"></option>
                          <option value="2"></option>
                        </select>
                      </div>
                      <div class="inp-setbox">
                        <div class="inp-cs">参数1</div>
                        <div class="inpu-value valinput">
                          <input type="text" value="12" style="width: 90px; height: 20px" />
                        </div>
                      </div>
                      <div class="inpVal">
                        <div class="inp-setbox">
                          <div class="inp-cs">参数2</div>
                          <div class="inpu-value csninput">
                            <input type="text" value="12" style="width: 90px; height: 20px" />
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="btn-box">
                      <div class="btn-set">
                        <button type="button">删除</button>
                      </div>
                      <div class="btn-set1">
                        <button type="button">确定</button>
                      </div>
                    </div>
                  </div>
                  <div class="canshupost-cont">
                    <!-- <div class="canshupost-box">
                      <div class="canshupost-center">A1</div>
                      <div class="fotos-post"></div>
                      <div class="canshupost-add">+</div>
                    </div> -->
                    <!-- <div class="canshupost-box">
                      <div class="canshupost-center">A2</div>

                      <div class="fotos-post"></div>

                      <div class="canshupost-add">+</div>
                    </div> -->
                    <!-- <div class="canshupost-box">
                      <div class="canshupost-center">A3</div>
                      <div class="fotos-post"></div>
                      <div class="canshupost-add">+</div>
                    </div> -->
                    <!-- <div class="canshupost-box">
                      <div class="canshupost-center">A4</div>
                      <div class="fotos-post"></div>
                      <div class="canshupost-add">+</div>
                    </div> -->
                  </div>
                </div>
                <div class="canshupost">
                  <!-- <div class="canshuwendu">燃烧稳定性分度值</div> -->
                  <div class="canshupost-close">
                    <div class="hearder">
                      <div></div>
                      <div class="close-box">x</div>
                    </div>
                    <div class="settom">
                      <div>
                        <span>算法</span>
                        <select class="select-box">
                          <option value="1"></option>
                          <option value="2"></option>
                        </select>
                      </div>
                      <div class="inp-setbox">
                        <div class="inp-cs">参数1</div>
                        <div class="inpu-value valinput">
                          <input type="text" value="12" style="width: 90px; height: 20px" />
                        </div>
                      </div>
                      <div class="inpVal">
                        <div class="inp-setbox">
                          <div class="inp-cs">参数2</div>
                          <div class="inpu-value csninput">
                            <input type="text" value="12" style="width: 90px; height: 20px" />
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="btn-box">
                      <div class="btn-set">
                        <button type="button">删除</button>
                      </div>
                      <div class="btn-set1">
                        <button type="button">确定</button>
                      </div>
                    </div>
                  </div>
                  <div class="canshupost-cont">
                    <!-- <div class="canshupost-box">
                      <div class="canshupost-center">A1</div>
                      <div class="fotos-post"></div>
                      <div class="canshupost-add">+</div>
                    </div> -->
                    <!-- <div class="canshupost-box">
                      <div class="canshupost-center">A2</div>

                      <div class="fotos-post"></div>

                      <div class="canshupost-add">+</div>
                    </div> -->
                    <!-- <div class="canshupost-box">
                      <div class="canshupost-center">A3</div>
                      <div class="fotos-post"></div>
                      <div class="canshupost-add">+</div>
                    </div> -->
                    <!-- <div class="canshupost-box">
                      <div class="canshupost-center">A4</div>
                      <div class="fotos-post"></div>
                      <div class="canshupost-add">+</div>
                    </div> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tanchuangSoure">
          <div class="tangchangClose">
            <div class="close">X</div>
          </div>
          <div class="TanChanglist">
            <div class="TanChangBox">
              <div class="TanChangBox-source">紫外交流</div>
              <div class="TanChangBox-close">
                <div class="TanChangBox-hearder">
                  <div></div>
                  <div class="TanChangBox-close-box">x</div>
                </div>
                <div class="TanChangBox-settom">
                  <div>
                    <span>算法</span>
                    <select class="TanChangBox-select-box">
                      <option value="1"></option>
                      <option value="2"></option>
                    </select>
                  </div>
                  <div class="TanChangBox-inp-setbox">
                    <div class="TanChangBox-inp-cs">参数1</div>
                    <div class="TanChangBox-inpu-value TanChangBox-valinput">
                      <input type="text" value="12" style="width: 90px; height: 20px" />
                    </div>
                  </div>
                  <div class="TanChangBox-inpVal">
                    <div class="TanChangBox-inp-setbox">
                      <div class="TanChangBox-inp-cs1">参数2</div>
                      <div class="TanChangBox-inpu-value TanChangBox-csninput">
                        <input type="text" value="12" style="width: 90px; height: 20px" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="TanChangBox-btn-box">
                  <div class="TanChangBox-btn-set">
                    <button type="button">删除</button>
                  </div>
                  <div class="TanChangBox-btn-set1">
                    <button type="button">确定</button>
                  </div>
                </div>
              </div>
              <div class="TanChangBox-canshupost-cont">
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A1</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A2</div>

                  <div class="TanChangBox-fotos-post"></div>

                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A3</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A4</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
              </div>
            </div>
            <div class="TanChangBox">
              <div class="TanChangBox-source">紫外直流</div>
              <div class="TanChangBox-close">
                <div class="TanChangBox-hearder">
                  <div></div>
                  <div class="TanChangBox-close-box">x</div>
                </div>
                <div class="TanChangBox-settom">
                  <div>
                    <span>算法</span>
                    <select class="TanChangBox-select-box">
                      <option value="1"></option>
                      <option value="2"></option>
                    </select>
                  </div>
                  <div class="TanChangBox-inp-setbox">
                    <div class="TanChangBox-inp-cs">参数1</div>
                    <div class="TanChangBox-inpu-value TanChangBox-valinput">
                      <input type="text" value="12" style="width: 90px; height: 20px" />
                    </div>
                  </div>
                  <div class="TanChangBox-inpVal">
                    <div class="TanChangBox-inp-setbox">
                      <div class="TanChangBox-inp-cs1">参数2</div>
                      <div class="TanChangBox-inpu-value TanChangBox-csninput">
                        <input type="text" value="12" style="width: 90px; height: 20px" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="TanChangBox-btn-box">
                  <div class="TanChangBox-btn-set">
                    <button type="button">删除</button>
                  </div>
                  <div class="TanChangBox-btn-set1">
                    <button type="button">确定</button>
                  </div>
                </div>
              </div>
              <div class="TanChangBox-canshupost-cont">
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A1</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A2</div>

                  <div class="TanChangBox-fotos-post"></div>

                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A3</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A4</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
              </div>
            </div>
            <div class="TanChangBox">
              <div class="TanChangBox-source">红外特征1</div>
              <div class="TanChangBox-close">
                <div class="TanChangBox-hearder">
                  <div></div>
                  <div class="TanChangBox-close-box">x</div>
                </div>
                <div class="TanChangBox-settom">
                  <div>
                    <span>算法</span>
                    <select class="TanChangBox-select-box">
                      <option value="1"></option>
                      <option value="2"></option>
                    </select>
                  </div>
                  <div class="TanChangBox-inp-setbox">
                    <div class="TanChangBox-inp-cs">参数1</div>
                    <div class="TanChangBox-inpu-value TanChangBox-valinput">
                      <input type="text" value="12" style="width: 90px; height: 20px" />
                    </div>
                  </div>
                  <div class="TanChangBox-inpVal">
                    <div class="TanChangBox-inp-setbox">
                      <div class="TanChangBox-inp-cs1">参数2</div>
                      <div class="TanChangBox-inpu-value TanChangBox-csninput">
                        <input type="text" value="12" style="width: 90px; height: 20px" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="TanChangBox-btn-box">
                  <div class="TanChangBox-btn-set">
                    <button type="button">删除</button>
                  </div>
                  <div class="TanChangBox-btn-set1">
                    <button type="button">确定</button>
                  </div>
                </div>
              </div>
              <div class="TanChangBox-canshupost-cont">
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A1</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A2</div>

                  <div class="TanChangBox-fotos-post"></div>

                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A3</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A4</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
              </div>
            </div>
            <div class="TanChangBox">
              <div class="TanChangBox-source">红外特征2</div>
              <div class="TanChangBox-close">
                <div class="TanChangBox-hearder">
                  <div></div>
                  <div class="TanChangBox-close-box">x</div>
                </div>
                <div class="TanChangBox-settom">
                  <div>
                    <span>算法</span>
                    <select class="TanChangBox-select-box">
                      <option value="1"></option>
                      <option value="2"></option>
                    </select>
                  </div>
                  <div class="TanChangBox-inp-setbox">
                    <div class="TanChangBox-inp-cs">参数1</div>
                    <div class="TanChangBox-inpu-value TanChangBox-valinput">
                      <input type="text" value="12" style="width: 90px; height: 20px" />
                    </div>
                  </div>
                  <div class="TanChangBox-inpVal">
                    <div class="TanChangBox-inp-setbox">
                      <div class="TanChangBox-inp-cs1">参数2</div>
                      <div class="TanChangBox-inpu-value TanChangBox-csninput">
                        <input type="text" value="12" style="width: 90px; height: 20px" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="TanChangBox-btn-box">
                  <div class="TanChangBox-btn-set">
                    <button type="button">删除</button>
                  </div>
                  <div class="TanChangBox-btn-set1">
                    <button type="button">确定</button>
                  </div>
                </div>
              </div>
              <div class="TanChangBox-canshupost-cont">
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A1</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A2</div>

                  <div class="TanChangBox-fotos-post"></div>

                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A3</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A4</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
              </div>
            </div>
            <div class="TanChangBox">
              <div class="TanChangBox-source">红外直流</div>
              <div class="TanChangBox-close">
                <div class="TanChangBox-hearder">
                  <div></div>
                  <div class="TanChangBox-close-box">x</div>
                </div>
                <div class="TanChangBox-settom">
                  <div>
                    <span>算法</span>
                    <select class="TanChangBox-select-box">
                      <option value="1"></option>
                      <option value="2"></option>
                    </select>
                  </div>
                  <div class="TanChangBox-inp-setbox">
                    <div class="TanChangBox-inp-cs">参数1</div>
                    <div class="TanChangBox-inpu-value TanChangBox-valinput">
                      <input type="text" value="12" style="width: 90px; height: 20px" />
                    </div>
                  </div>
                  <div class="TanChangBox-inpVal">
                    <div class="TanChangBox-inp-setbox">
                      <div class="TanChangBox-inp-cs1">参数2</div>
                      <div class="TanChangBox-inpu-value TanChangBox-csninput">
                        <input type="text" value="12" style="width: 90px; height: 20px" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="TanChangBox-btn-box">
                  <div class="TanChangBox-btn-set">
                    <button type="button">删除</button>
                  </div>
                  <div class="TanChangBox-btn-set1">
                    <button type="button">确定</button>
                  </div>
                </div>
              </div>
              <div class="TanChangBox-canshupost-cont">
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A1</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A2</div>

                  <div class="TanChangBox-fotos-post"></div>

                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A3</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A4</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
              </div>
            </div>
            <div class="TanChangBox">
              <div class="TanChangBox-source">可见光交流1</div>
              <div class="TanChangBox-close">
                <div class="TanChangBox-hearder">
                  <div></div>
                  <div class="TanChangBox-close-box">x</div>
                </div>
                <div class="TanChangBox-settom">
                  <div>
                    <span>算法</span>
                    <select class="TanChangBox-select-box">
                      <option value="1"></option>
                      <option value="2"></option>
                    </select>
                  </div>
                  <div class="TanChangBox-inp-setbox">
                    <div class="TanChangBox-inp-cs">参数1</div>
                    <div class="TanChangBox-inpu-value TanChangBox-valinput">
                      <input type="text" value="12" style="width: 90px; height: 20px" />
                    </div>
                  </div>
                  <div class="TanChangBox-inpVal">
                    <div class="TanChangBox-inp-setbox">
                      <div class="TanChangBox-inp-cs1">参数2</div>
                      <div class="TanChangBox-inpu-value TanChangBox-csninput">
                        <input type="text" value="12" style="width: 90px; height: 20px" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="TanChangBox-btn-box">
                  <div class="TanChangBox-btn-set">
                    <button type="button">删除</button>
                  </div>
                  <div class="TanChangBox-btn-set1">
                    <button type="button">确定</button>
                  </div>
                </div>
              </div>
              <div class="TanChangBox-canshupost-cont">
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A1</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A2</div>

                  <div class="TanChangBox-fotos-post"></div>

                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A3</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A4</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
              </div>
            </div>
            <div class="TanChangBox">
              <div class="TanChangBox-source">可见光交流2</div>
              <div class="TanChangBox-close">
                <div class="TanChangBox-hearder">
                  <div></div>
                  <div class="TanChangBox-close-box">x</div>
                </div>
                <div class="TanChangBox-settom">
                  <div>
                    <span>算法</span>
                    <select class="TanChangBox-select-box">
                      <option value="1"></option>
                      <option value="2"></option>
                    </select>
                  </div>
                  <div class="TanChangBox-inp-setbox">
                    <div class="TanChangBox-inp-cs">参数1</div>
                    <div class="TanChangBox-inpu-value TanChangBox-valinput">
                      <input type="text" value="12" style="width: 90px; height: 20px" />
                    </div>
                  </div>
                  <div class="TanChangBox-inpVal">
                    <div class="TanChangBox-inp-setbox">
                      <div class="TanChangBox-inp-cs1">参数2</div>
                      <div class="TanChangBox-inpu-value TanChangBox-csninput">
                        <input type="text" value="12" style="width: 90px; height: 20px" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="TanChangBox-btn-box">
                  <div class="TanChangBox-btn-set">
                    <button type="button">删除</button>
                  </div>
                  <div class="TanChangBox-btn-set1">
                    <button type="button">确定</button>
                  </div>
                </div>
              </div>
              <div class="TanChangBox-canshupost-cont">
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A1</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A2</div>

                  <div class="TanChangBox-fotos-post"></div>

                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A3</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A4</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
              </div>
            </div>
            <div class="TanChangBox">
              <div class="TanChangBox-source">可见光直流</div>
              <div class="TanChangBox-close">
                <div class="TanChangBox-hearder">
                  <div></div>
                  <div class="TanChangBox-close-box">x</div>
                </div>
                <div class="TanChangBox-settom">
                  <div>
                    <span>算法</span>
                    <select class="TanChangBox-select-box">
                      <option value="1"></option>
                      <option value="2"></option>
                    </select>
                  </div>
                  <div class="TanChangBox-inp-setbox">
                    <div class="TanChangBox-inp-cs">参数1</div>
                    <div class="TanChangBox-inpu-value TanChangBox-valinput">
                      <input type="text" value="12" style="width: 90px; height: 20px" />
                    </div>
                  </div>
                  <div class="TanChangBox-inpVal">
                    <div class="TanChangBox-inp-setbox">
                      <div class="TanChangBox-inp-cs1">参数2</div>
                      <div class="TanChangBox-inpu-value TanChangBox-csninput">
                        <input type="text" value="12" style="width: 90px; height: 20px" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="TanChangBox-btn-box">
                  <div class="TanChangBox-btn-set">
                    <button type="button">删除</button>
                  </div>
                  <div class="TanChangBox-btn-set1">
                    <button type="button">确定</button>
                  </div>
                </div>
              </div>
              <div class="TanChangBox-canshupost-cont">
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A1</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A2</div>

                  <div class="TanChangBox-fotos-post"></div>

                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A3</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
                <div class="TanChangBox-canshupost-box">
                  <div class="TanChangBox-canshupost-center">A4</div>
                  <div class="TanChangBox-fotos-post"></div>
                  <div class="TanChangBox-canshupost-add">+</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="zhankai">
        <div><img src="../assets/箭头左.png" alt="" /></div>
        <div class="zhankaitext">展开</div>
      </div>

      <div class="ls_maincont"></div>

      <div style="background-color: #041c30">
    
    <div class="outer-container"   >
        <div class="search-form-panel">
            <el-form :model="searchData" label-width="120"     >
                <el-form-item label="定制查询" prop="type">
                    <el-radio :value="0" v-model="searchData.type" style="width: 20px;"></el-radio>
                </el-form-item>
                <el-form-item label="开始时间" prop="valueStart">
                    <el-input-number :min="0" v-model="searchData.valueStart" :disabled="searchData.type === 1" style="width: 120px" />
                    <el-select v-model="searchData.unitStart" style="width: 80px" :disabled="searchData.type === 1">
                        <el-option v-for="(item, index) in TIME_UNIT" :key="index" :value="item.value" :label="item.label"></el-option>
                    </el-select>
                    <span style="margin-left: 4px;">前</span>
                </el-form-item>
                <el-form-item label="结束时间" prop="unitEnd">
                    <el-input-number :min="0" v-model="searchData.valueEnd" style="width: 120px" :disabled="searchData.type === 1" />
                    <el-select v-model="searchData.unitEnd" style="width: 70px" :disabled="searchData.type === 1">
                        <el-option v-for="(item, index) in TIME_UNIT" :key="index" :value="item.value" :label="item.label"></el-option>
                    </el-select>
                    <span style="margin-left: 4px;">前</span>
                </el-form-item>
                <el-form-item label="数据间隔">
                    <el-input-number :min="0" v-model="searchData.value" style="width: 120px"></el-input-number>
                    <el-select v-model="searchData.unit" style="width: 70px">
                        <el-option v-for="(item, index) in TIME_UNIT" :key="index" :value="item.value" :label="item.label"></el-option>
                    </el-select>
                    <span style="margin-left: 4px;">前</span>
                </el-form-item>
                <el-form-item label="最小值"    style="display: none;">
                    <el-input-number :min="1" v-model="searchData.min" style="width: 140px" />
                </el-form-item>
            </el-form>
            <el-form :model="searchData" label-width="120">
                <el-form-item label="自定义查询">
                    <el-radio :value="1" v-model="searchData.type" style="width: 20px;"></el-radio>
                </el-form-item>
                <el-form-item label="开始时间">
                    <el-config-provider :locale="zhCn">
                        <el-date-picker v-model="timeRange" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" :disabled="searchData.type === 0" :default-time="[initStratTime, initEndTime]" style="width: 526px" format="YYYY-MM-DD HH:mm:ss" />
                    </el-config-provider>
                </el-form-item>
                <el-form-item label="特征值">
                    <el-select class="sdz-select" :teleported="false" v-model="searchData.sdzs" multiple collapse-tags clearable placeholder="请选择特征值" style="width: 209px">
                        <el-option v-for="(item, index) in sdzOptions" :value="index" :label="item.description" :key="index">
                            {{ item.description }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="最大值"   style="display: none;">
                    <el-input-number :min="1" v-model="searchData.max" style="width: 140px" />
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" @click="searchHistoryData">查 询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="echarts-panel" id="history_echarts" v-loading="loading">
        </div>
        <div class="result-table-panel">
            <div class="popover-container" v-show="popOverVisible" :style="poperStyle">
                <span @click="toAddSDZ">添加</span>
                <span @click="toDeleteSDZ">删除</span>
            </div>
            <el-table  v-loading="loading" ref="multipleTableRef" size="small" @row-click="changeMinMax" @row-contextmenu="addOrDelete" :data="resultTableData" :border="true" style="width: 80%; height: 200px;" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" :align="'center'" />
                <el-table-column prop="seq" label="序号" width="60" :align="'center'" />
                <!-- <el-table-column prop="name" label="名称" width="200" /> -->
                <el-table-column prop="description" label="描述" width="200" />
                <el-table-column prop="unit" label="单位" width="80" />
                <el-table-column prop="v" label="当前值" width="120" />
                <el-table-column prop="avg" label="平均值" width="100" />
                <el-table-column prop="cursorVal" label="光标值" width="100" />
                <el-table-column prop="max" label="上限" width="120">
                    <template #default="{ row }">
                        <el-input v-model="row.max" size="small" @change="changeMinMax" />
                    </template>
                </el-table-column>
                <el-table-column prop="min" label="下限" width="120">
                    <template #default="{ row }">
                        <el-input v-model="row.min" size="small" @change="changeMinMax" />
                    </template>
                </el-table-column>
                <el-table-column prop="maxTime" label="最大值时刻" width="180" />
                <el-table-column prop="minTime" label="最小值时刻" width="180" />
            </el-table>
            <el-dialog v-model="dialogVisible" width="450">
                <el-form label-width="100" label-position="left" style=" padding-top: 10px;" label-suffix=":">
                    <el-form-item prop="filterValue" label="查找内容">
                        <el-input v-model="filterValue" placeholder="过滤" style="width: 200px"></el-input>
                        <el-button style="position: absolute; right: 20px;" type="primary" @click="toSearchSdz">查找</el-button>
                    </el-form-item>
                </el-form>
                <el-table ref="dialogTableComp" :data="dialogTableData" size="small" :border="true" style="height: 400px;">
                    <el-table-column type="selection" width="55" :align="'center'" />
                    <el-table-column prop="seq" label="序号" width="60" :align="'center'" />
                    <el-table-column prop="description" label="描述" width="200" />
                </el-table>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary" @click="toConfirmDialog">确认</el-button>
                        <el-button @click="dialogVisible = false">取消</el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>

</div>
     


      
    </div>
  </div>

  <div class="stage_t">
    <a href="#"></a>
    <h1>1号锅炉燃烧数字化与低负荷稳燃监测管理系统</h1>
    <div>
      <span></span>
      <span id="todayTimer">{{ nowTime }}</span>
    </div>
  </div>
</template>


<script setup>
import { ref, reactive, onMounted, nextTick, watch } from "vue";
import { formatTime, formatDate } from "../utils/date.js";
import { parameter, setParameter, getSDZlist, history ,history0,searchSdz} from "../api/canshushezhi.js";
import * as echarts from "echarts";
import { ElMessage } from 'element-plus'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
let chouti = ref("");
let zhankais = ref("");
const nowTime = ref("");
const loading = ref(false);
const stratTime = new Date(
  new Date().getTime() - (10 * 24 - 8) * 60 * 60 * 1000
).toISOString();
const endTime = new Date(new Date().getTime() + 8 * 60 * 60 * 1000).toISOString();
// 获取当前日期
const today = new Date();
// 获取十天前的日期
const initStratTime = new Date(today);
initStratTime.setDate(today.getDate() - 10);

// 将十天前的日期设置为零时
initStratTime.setHours(0, 0, 0, 0);

// 获取今日的日期
const initEndTime = new Date(today);
// 将今日的日期设置为24时
initEndTime.setHours(23, 59, 59, 999);

const timeRange = ref([initStratTime, initEndTime])

const TIME_UNIT = [
    { value: 'd', label: '天' },
    { value: 'h', label: '时' },
    { value: 'm', label: '分' },
    { value: 's', label: '秒' },
]
// 查询的数据源
const searchData = reactive({
  type: 0, //	默认定制查询0自定义查询1		
  valueStart: 0, //	定制追溯开始时间正整数		
  unitStart: "d", //	默认定制查询开始时间单位秒s分m时h天d，和自定义查询互斥（按钮置灰）		
  valueEnd: 0, //	定制追溯结束时间正整数		
  unitEnd: "d", //	默认定制查询结束时间单位秒s分m时h天d，和自定义查询互斥（按钮置灰）		
  value: 1, //	间隔数值正整数		
  unit: "s", //	查询间隔时间单位秒s分m时h天d		
  startTime: stratTime.substring(0, stratTime.indexOf("T") + 6), //	自定义开始时间（定制置灰）		
  endTime: endTime.substring(0, endTime.indexOf("T") + 6), //	自定义结束时间默认当前		
  min: 0, //	过滤最小值		
  max: 2000, //	过滤最大值		
  sdzs: [],
});
const selectSDZArr = reactive([])
let myChart;
const serieData = reactive([])
const legendData = reactive([])
let timeoutCounter = -1

onMounted(async () => {
  setInterval(() => {
    nowTime.value = formatTime(new Date());
  });
  function $(el, all = false) {
    if (all) return document.querySelectorAll(el);
    return document.querySelector(el);
  }
  // 展开点击
  $(".choutileft_header").onclick = function () {
    $(".chouti").className = "chouti slide-out-right";
    $(".zhankai").className = "zhankai slide-in-blurred-right";
    setTimeout(function () {
      $(".chouti").style.display = "none";
    }, 800);
  };
  // 收缩点击
  $(".zhankai").onclick = function () {
    $(".chouti").style.display = "block";
    $(".chouti").className = "chouti slide-in-blurred-right";
    $(".zhankai").className = "zhankai slide-out-right";
  };
   // 基于准备好的dom，初始化echarts实例
   myChart = echarts.init(document.getElementById("history_echarts"), 'dark');

myChart.setOption(optionObj)

myChart.on('tooltip', function (params) {
    // params 包含了当前鼠标所在的数据点信息
    var seriesData = params.data; // 获取当前鼠标所在的数据点
    console.log(seriesData);
});

// 请求接口的
await setSdzListData()
if (sdzOptions.length > 0) {
    // searchData.sdzs.push(0, 1, 2, 3)
    // searchHistoryData()
}
//  页面加载动画
// doAjax()
obj()
});

// 监听历史最多可以查10条
// watch(
//     () => searchData.sdzs.length,
//     (sdzs) => {
//         if (timeoutCounter !== -1) {
//             timeoutCounter = -1
//             clearTimeout(timeoutCounter)
//         }
//         timeoutCounter = setTimeout(function () {
//             timeoutCounter = -1
//             searchHistoryData()
//         }, 200)
//         // if (sdzs.length > 4) {
//         //     nextTick(() => {
//         //         ElMessage({
//         //             type: 'warning',
//         //             message: `SDZ最多只能选择4组数据`,
//         //         })
//         //     })
//         // }
//     }
// )

// 修改表格中的光标列
const changeValue = (arr) => {
    if (arr && arr.length > 0) {
        let selection = multipleTableRef.value.getSelectionRows()
        for (let i = 0; i < selection.length; i++) {
            if (arr[i] && arr[i].data) {
                selection[i].cursorVal = arr[i].data[1]
            } else {
                selection[i].cursorVal = ''
            }
        }
    }
}
const optionObj = {
    // 设置的是标题
    title: {
        text: '历史曲线'
    },
    tooltip: {
        trigger: 'axis',
        formatter: (c) => {
            let str = ''
            let temp = {
                showTime: '', // 时间
                marker: '', // 颜色
                seriesName: '', // legend名称
                valueData: '', // 数值
                setWidthSpan: '',
            }
            c.forEach((item) => {
                temp.showTime = item.data[0]
                temp.marker = item.marker
                temp.seriesName = item.seriesName
                temp.valueData = item.value[1]
                temp.setWidthSpan = '<span style="display:inline-block;width:10px;height:10px;"></span>'
                str += temp.marker + temp.seriesName + temp.setWidthSpan + temp.valueData + '<br />'
            })
            changeValue(c)
            return temp.showTime + '<br />' + str
        },
    },
    // 网格间距设置
    grid: {
        top: '40px',
        bottom: '50px',
        left: '60px',
        right: '60px',
        containLabel: true
    },
    dataZoom: [
        {
            type: 'slider',
            show: true,
            brushSelect: false,
            xAxisIndex: [0],
        },
        {
            type: 'slider',
            show: true,
            brushSelect: false,
            yAxisIndex: [0],
            left: '0%',
        },
        {
            type: 'inside',
            xAxisIndex: [0],
        },
        {
            type: 'inside',
            yAxisIndex: [0],
        }
    ],
    xAxis: {
        // xAxis的下不在设置data属性共享时间`
        type: 'time',
        splitLine: { show: true },
        lineStyle: {
            width: 2
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            // 设置坐标轴上的时间格式
            formatter: function (value) {
                // console.log('时间戳', value)
                // 将时间转换为 JavaScript 日期对象  
                return backTime(value)
            },
            showMinLabel: true,
            showMaxLabel: true // 固定显示X轴的最后一条数据
        },
        // 更改x轴线的颜色
        axisLine: {
            lineStyle: {
                color: '#D2DBE6;',
                width: 1 // x轴线的宽度
            }
        },
    },
    yAxis: {
        type: 'value',
        splitLine: { show: true }
    }
}

const sdzOptions = reactive([])
// 设置SDZ数据
const setSdzListData = async () => {
    let sdzRes = await getSDZlist();
    console.log(sdzRes);
    if (sdzRes.status !== 200) {
        return
    }
    sdzOptions.push(...sdzRes.data)
}

const resultTableData = reactive([]);
function backTime(value) {
    let date = new Date(value);
    // 获取年份、月份和日期  
    let year = date.getFullYear();
    let month = date.getMonth() + 1; // 月份从 0 开始，需要加 1  
    let day = date.getDate();

    let hours = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();

    // 格式化月份和日期为两位数（不足两位时补零）  
    month = month < 10 ? '0' + month : month;
    day = day < 10 ? '0' + day : day;

    hours = hours < 10 ? '0' + hours : hours;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;

    // 返回格式化后的字符串  
    return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
}
const multipleTableRef = ref(null)

let setInitSelected = true
// 历史曲线查询
const searchHistoryData = async (isDialog = false) => {
    timeoutCounter = -1
    clearTimeout(timeoutCounter)
    let params = JSON.parse(JSON.stringify(searchData));
    if (params.type === 1) {
        params.startTime = formatDate(timeRange.value[0])
        params.endTime = formatDate(timeRange.value[1])
    }
    if (isDialog === true) {
        params.sdzs = [...selectSDZArr]
    } else {
        if (!params.sdzs || params.sdzs.length < 1) {
            ElMessage({
                type: 'warning',
                message: `请选择sdz信息！`,
            })
            return;
        } else {
            const sdzsTemp = []
            params.sdzs.forEach(i => {
                sdzsTemp.push({
                    seq: sdzOptions[i].seq,
                    table0: sdzOptions[i].table0,
                    column0: sdzOptions[i].column0,
                    description: sdzOptions[i].description,
                })
            })
            params.sdzs = sdzsTemp
        }
    }
    loading.value = true
    let res = await history(params);
    loading.value = false
    if (res.status === 200) {
        myChart.clear();
        setInitSelected = true
        // const tempArr = selectSDZArr.slice(resultTableData.length)
        resultTableData.length = 0
        serieData.length = 0
        legendData.length = 0
        res.data.forEach((item, i) => {
            if (isDialog !== true) {
                selectSDZArr.length = 0
                searchData.sdzs?.forEach(i => {
                    selectSDZArr.push({ seq: searchData.sdzs[i], ...sdzOptions[i] })
                })
            }
            resultTableData.push(item)
            let description = item.description = item.description || `description_${selectSDZArr[i]?.seq}`
            legendData.push({ name: description })
            serieData.push({
                "name": description,
                "type": "line",
                "symbol": "none",
                "connectNulls": true,
                "showAllSymbol": true,
                // 让每一条折线拥有数据自己的时间
                "data": item.avgs.map(item => [item.t, item.avg]),
                "unit": "%",
                "markPoint": {
                    "symbol": "rect",
                    "symbolSize": "12",
                    "label": { "show": false },
                    "tooltip": { "triggerOn": "click", "trigger": "item" },
                }
            })
        });
        myChart.setOption(optionObj)
        myChart.setOption({
            series: serieData,
            legend: {
                data: legendData
            },
            yAxis: {
                max: (res.data[0] && res.data[0].max0) ? res.data[0].max0 : 4000,
                min: 0,
            }
        })
        nextTick(() => {
            multipleTableRef.value.toggleAllSelection()
            myChart.getOption()
        })
    }
};

const handleSelectionChange = (selection) => {
    const legendSelected = {}
    legendData.forEach((item, i) => {
        if (selection.find(
            row => {
                if (row.description) {
                    return row.description === item.name
                } else {
                    return row.seq == item.name.split('_')[1]
                }
            })
        ) {
            legendSelected[item.name] = true
        } else {
            legendSelected[item.name] = false
        }
    })
    myChart.setOption({ legend: { selected: legendSelected } })
}

const poperStyle = reactive({
    left: 0,
    top: 0,
    bottom: 'unset',
})
const currentClickNo = ref(-1)
const popOverVisible = ref(false)
const addOrDelete = (row, col, $event) => {
    $event.preventDefault();
    popOverVisible.value = true
    poperStyle.left = $event.pageX + 'px'
    // poperStyle.top = $event.pageY + 'px'
    // poperStyle.left = $event.clientX + 'px'
    poperStyle.top = ($event.y - 55) + 'px'
    currentClickNo.value = row.seq

    let clickHiddenEventFunc = function () {
        popOverVisible.value = false
        document.removeEventListener('click', clickHiddenEventFunc)
    }
    clickHiddenEventFunc = document.addEventListener('click', clickHiddenEventFunc)

}
const toAddSDZ = () => {
    dialogVisible.value = true
    
    // nextTick(() => {
    //     if (setInitSelected) {
    //         dialogTableComp.value.toggleAllSelection()
    //         nextTick(() => {
    //             dialogTableComp.value.getSelectionRows().forEach(row => {
    //                 if (selectSDZArr.find(item => item.seq === row.seq)) {
    //                     dialogTableComp.value.toggleRowSelection(row, true)
    //                 } else {
    //                     dialogTableComp.value.toggleRowSelection(row, false)
    //                     console.log(row.seq)
    //                 }
    //             })
    //         })
    //         setInitSelected = false
    //     }
    // })
}
const toDeleteSDZ = () => {
    if (currentClickNo.value > -1) {
        let deleteIndex = 0
        selectSDZArr.forEach((item, i) => {
            if (item.seq === currentClickNo.value) {
                deleteIndex = i
            }
        })
        selectSDZArr.splice(deleteIndex, 1)
        searchData.sdzs = searchData.sdzs.filter(i => sdzOptions[i].seq !== currentClickNo.value)
        currentClickNo.value = -1
        searchHistoryData(true)
    }
}

const changeMinMax = (row, col) => {
    if (col.type === 'selection') return
    myChart.setOption({
        yAxis: {
            max: Number(row.max),
            min: Number(row.min),
        }
    })
}
const filterValue = ref('')
const dialogVisible = ref(false)

watch(
    () => dialogVisible.value,
    (newVal) => {
        if (newVal) {
            dialogTableData.length = 0
            dialogTableData.push(...sdzOptions)
        }
    }
)

// 模糊查询点表
const dialogTableData = reactive([])
const toSearchSdz = () => {
    searchSdz(filterValue.value).then(res => {
        if (res.status === 200) {
            dialogTableData.length = 0
            dialogTableData.push(...res.data)
        }
    })
}

const dialogTableComp = ref(null)
// 弹窗确认按钮
const toConfirmDialog = () => {
    const rows = dialogTableComp.value.getSelectionRows()
    selectSDZArr.push(...rows)
    searchHistoryData(true)
    dialogVisible.value = false
}




const pointArr = reactive([
  "A1",
  "A2",
  "A3",
  "A4",
  "B1",
  "B2",
  "B3",
  "B4",
  "C1",
  "C2",
  "C3",
  "C4",
  "D1",
  "D2",
  "D3",
  "D4",
]);

const lavelMap = {
  i: "停机红外直流",
  t: "温度分析值",
  d: "着火距离分度值",
  s: "燃烧稳定性分度值",
};




// 动态生成点位参数设置信息
function setPointerValue() {
  const keySuffix = ["-label", "i", "t", "d", "s"];
  let containerEl = document.getElementById("zbf_edit_cur1");
  for (let index = 0; index < pointArr.length; index++) {
    const name = pointArr[index];
    let pEl = document.createElement("p");
    for (let j = 0; j < 5; j++) {
      let spanEl = document.createElement("span");
      // 设置key属性
      let key = "";
      if (name.length === 2) {
        key = name.toLowerCase() + keySuffix[j];
      } else if (name[0] === "S") {
        key = "s" + name[4] + keySuffix[j];
      } else {
        key = "location";
      }
      if (j !== 0) {
        spanEl.setAttribute("key", key);
        spanEl.setAttribute("label", `${name} - ${lavelMap[keySuffix[j]]}`);
      }
      spanEl.innerText = j === 0 ? name : (canshuData[key] || '-');
      pEl.appendChild(spanEl);
    }
    containerEl.appendChild(pEl);
  }
}

let currentEditPointerLabel = ref(""); // 当前编辑字段的label
let currentEditPointerKey = ref(""); // 当前编辑字段的key
let currentEditPointerValue = ref(0); // 当前编辑字段的value
const inputEl = ref(null);

// 打开编辑面板且设置当前编辑的label和value
function openEditPanel(e) {
  let panelEl = document.getElementById("edit_pointer_panel");
  if (e.target.tagName !== "SPAN" || !e.target.getAttribute("key")) {
    return;
  }
  let spanEl = document.getElementsByClassName("editing")[0];
  if (spanEl) spanEl.classList.remove("editing");
  // 显示并移动编辑面板
  panelEl.style.display = "inline-block";
  panelEl.style.top = e.target.offsetTop + 64 + "px";
  panelEl.style.left = e.target.offsetLeft - 40 + "px";
  let key = e.target.getAttribute("key");
  let label = e.target.getAttribute("label");
  currentEditPointerLabel.value = label;
  currentEditPointerKey.value = key;
  currentEditPointerValue.value = canshuData[key];
  // 获得焦点
  inputEl.value.focus();
  // 全选文本
  setTimeout(() => inputEl.value.select(), 50);
  // 高亮显示当前的编辑的元素
  e.target.classList.add("editing");
}

// 关闭编辑面板
function closeEditPanel() {
  let panelEl = document.getElementById("edit_pointer_panel");
  panelEl.style.display = "none";
  let spanEl = document.getElementsByClassName("editing")[0];
  spanEl.classList.remove("editing");
}

// 保存数据
const savePointerData = async () => {
  let arr = [
    {
      parameter: currentEditPointerKey.value,
      v: currentEditPointerValue.value,
    },
  ];
  let res = await setParameter(arr);

  if (res.status === 200) {
    canshuData[currentEditPointerKey.value] = currentEditPointerValue.value;
    let spanEl = document.getElementsByClassName("editing")[0];
    if (spanEl) spanEl.innerText = currentEditPointerValue.value;
  }
  closeEditPanel();
};
// 后台返回的全部参数数据
const canshuData = reactive({});

// 获取数据
let obj = async () => {
  let res = await parameter();
  if (res.status === 200) {
    for (let key in res.data) {
      canshuData[key] = res.data[key];
    }
    // 点位参数设置数据赋值
    setPointerValue();
  }
};

</script>



<style lang="scss" scoped>
.outer-container {
   width: 100%;
    position: relative;
    top: -13px;  
    left: px;
    min-width: 1800px;
    height: calc(100vh - 55px);
    color: #000;
    background-color: #042c45;

    .search-form-panel {
        padding: 20px 100px;
        background-color: #042c45;

        .el-form {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;

            &:last-child {
                .el-form-item {
                    margin-bottom: 0;
                }
            }

            .el-form-item {
                margin-bottom: 10px;
                color: #FFF;

                &:deep(.el-form-item__label) {
                    --el-text-color-regular: #FFF;
                }
            }

            .sdz-select:deep(.el-select__popper ul.el-scrollbar__view.el-select-dropdown__list) {
                width: 80vw;
                height: 50vh;
                display: flex;
                flex-wrap: wrap;
            }

            .sdz-select:deep(.el-select__popper ul.el-scrollbar__view.el-select-dropdown__list>li) {
                /* width: 200px; */
                flex: 20% 0 1;
                border-right: 1px solid #ccc;
            }

            .sdz-select:deep(.el-select-dropdown__wrap) {
                max-height: 50vh;
            }

            .sdz-select:deep(.el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected::after) {
                left: 20px;
                right: unset;
            }

            .sdz-select:deep(.el-select-dropdown.is-multiple .el-select-dropdown__item::before) {
                content: "";
                position: absolute;
                top: 50%;
                border: 1px solid #ccc;
                width: 14px;
                height: 14px;
                left: 18px;
                right: unset;
                border: 1px solid #606266;
                transform: translateY(-50%);
            }

            .sdz-select:deep(.el-select-dropdown__item) {
                padding-left: 40px;
            }
        }
    }

    .echarts-panel {
        width: 80%;
        margin: 0 auto;
        background-color: #100c2a;
        height: 500px;
        padding-top: 20px;
    }

    .result-table-panel {
        height: 200px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        >.el-table {
            background-color: #100c2a;

            &:deep(.cell) {
                text-wrap: nowrap;
            };
            $colorArr: #5470c6, #91cc75, #fac858, #ee6666, #73c0de, #3ba272, #fc8452, #9a60b4, #ea7ccc;
            @for $i from 1 through length($colorArr) {
                :deep(tr.el-table__row:nth-child(9n + #{$i})) {

                    .cell,
                    .el-input__inner {
                        color: nth($colorArr, $i);
                    }
                }
            }
            &:deep(.el-table__cell) {
                background-color: #100c2a;
            }

            .el-input:deep(.el-input__wrapper) {
                box-shadow: unset;
                background-color: #100c2a;

                &.is-focus {
                    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
                    background-color: #FFF;
                }
            }
        }
        .popover-container {
            position: absolute;
            width: 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10;
            background-color: #FFF;
            border: 1px solid #CCC;
            box-sizing: content-box;
            padding: 2px 2px;
            border-radius: 2px;

            span {
                display: inline-block;
                box-sizing: content-box;
                width: 80px;
                font-size: 12px;
                line-height: 26px;
                text-align: center;
                border-radius: 2px;
                color: #333;

                &:hover {
                    background-color: #008AFF;
                    color: #FFF;
                }
            }

        }
    }

}

</style>

<style lang="css" scoped>
.chouti,
.choutileft_main {
  height: 100%;
}

.choutileft_main {
  height: 100%;
  overflow: auto;
}

.react .title.lishi>span {
  display: inline-block;
  font-size: 36px;
  /* color: #98e4f3; */
  padding-left: 34px;
  background: url(./assets/zjz.png) center left no-repeat;
  background-size: 22px;
}

.react .title.lishi {
  box-sizing: border-box;
  color: #fff;
  font-size: 28px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* width: 100%; */
  height: 100%;
  padding: 10px 20px;
  margin: 10px;
  /* background: rgb(0 188 255 / 10%); */
}

#zbf_edit_cur span {
  color: #00d4ff;
}

#zbf_edit_cur1:deep(span) {
  line-height: 60px;
  user-select: none;
}

#zbf_edit_cur1:deep(.editing) {
  border-color: yellowgreen;
}

input:focus {
  outline: none;
}

.cssz .zssz_c .csszenvent_d:deep(span:first-child),
.csszenvent_d:deep(p span:first-child),
.envent_u1:deep(span:first-child) {
  min-width: 100px;
}

#edit_pointer_panel {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 250px;
  height: 80px;
  padding: 10px 20px;

  background-color: #000;
  opacity: 0.9;
  color: #fff;
  font-size: 20px;
}

#edit_pointer_panel .label {
  display: block;
  padding: 10px 0;
}

#edit_pointer_panel>div {
  display: flex;
  align-items: flex-end;
}

#edit_pointer_panel button {
  width: 50px;
  height: 30px;
  border-style: none;
  line-height: 30px;
  background-color: #fff;
  color: #000;
  font-weight: 700;
  margin-left: 20px;
}

#edit_pointer_panel input {
  width: 100px;
  height: 30px;
  font-size: 20px;
  line-height: 25px;
  border-style: none;
  padding: 0 5px;
}

.dataApoiutes {
  height: 20px;
}

.search-panel {
  color: #FFF;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.customized-panel {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.custom-panel {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.search-panel .form-item {
  width: 140px;
  display: flex;
}

.search-panel .form-item>label {
  display: inline-block;
  text-align: end;
  width: 80px;
  font-size: 14px;
  line-height: 20px;
  background: none;
  line-height: 20px;
  margin-right: 10px;
}

.search-panel .form-item>input[type="number"] {
  width: 50px;
}

.search-panel .form-item>select {
  width: 50px;
  height: 20px;
}


.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-panel .button-container button {
  width: 80px;
  padding: 0px 20px;
  background-color: #00d4ff;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  border-style: none;
  margin-left: 200px;
}

#history_echarts {
  width: 80vw;
  height: calc(100vh - 400px);
  margin: 10px auto;
}
.sdz-select:deep(.el-select__popper ul.el-scrollbar__view.el-select-dropdown__list){
  width: 80vw;
  height: 50vh;
  display: flex;
  flex-wrap: wrap;
}

.sdz-select:deep(.el-select__popper ul.el-scrollbar__view.el-select-dropdown__list>li){
  /* width: 200px; */
  flex: 20%;
  border-right: 1px solid #ccc;
}

.sdz-select:deep(.el-select-dropdown__wrap) {
  max-height: 50vh;
}
.sdz-select:deep(.el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected::after) {
  left: 20px;
  right: unset;
}
.sdz-select:deep(.el-select-dropdown.is-multiple .el-select-dropdown__item::before) {
  content: "";
  position: absolute;
  top: 50%;
  border: 1px solid #ccc;
  width: 14px;
  height: 14px;
  left: 18px;
  right: unset;
  border: 1px solid #606266;
  transform: translateY(-50%);
}
.sdz-select:deep(.el-select-dropdown__item) {
  padding-left: 40px;
}
</style>

<style>
.sdz-cascader.sdz-cascader-0 > .el-cascader-panel .el-cascader-menu:nth-child(1) label.el-checkbox,
.sdz-cascader.sdz-cascader-0 > .el-cascader-panel .el-cascader-menu:nth-child(2) label.el-checkbox {
  /* display: none; */
  visibility: hidden;
}
.stage_t {
  z-index: 1000
}

.stage_t a{
  height: 50px
}

.no-click {
    pointer-events: none;
}
</style>